<template>
  <view class="video">
    <view v-for="item in httpList" :key="item.id" class="card" @click="onGoVideo(item.id)">
      <text class="card-name" v-if="item.title">{{ item.title }}</text>
      <view class="card-image" @longpress.stop="onLongPress(item)">
        <uv-image
          :src="item.cover || (isFileType(item.address) === 'image' ? item.address : defaultImagesList[random])"
          height="100%"
          width="100%"
          :showMenuByLongpress="false"
        ></uv-image>
      </view>
      <view class="card-status" :style="{ color: item.approvedStauts.color }" v-if="props.isOper">
        {{ item.approvedStauts.label }}
      </view>
      <view class="card-oper" v-if="props.isOper && item.oper">
        <view class="card-oper-box" @click.stop="onDelte(item)">
          <text>删除</text>
          <uv-icon name="jianshao" custom-prefix="custom-icon" color="#fff" size="65rpx"></uv-icon>
        </view>
        <uv-line></uv-line>
        <view class="card-oper-box" @click.stop="onEdit(item)">
          <text>编辑</text>
          <uv-icon name="bianji" custom-prefix="custom-icon" color="#fff" size="65rpx"></uv-icon>
        </view>
      </view>
    </view>
    <view class="video-empty">
      <uv-empty v-if="!httpList.length"></uv-empty>
    </view>
  </view>
  <uv-toast ref="toastRef"></uv-toast>
  <uv-modal ref="modalRef" title="提示" content="确认删除？" @confirm="onConfirm" showCancelButton></uv-modal>
</template>

<script setup>
  import { ref, reactive, defineProps, watch, nextTick, defineExpose } from 'vue';
  import { checkStatus, defaultImagesList } from '@/common/js/global.js';
  import { isFileType, onGoVideo, toastFn, suiji } from '@/common/js/fn';
  import store from '@/store/index.js';
  let { state } = store;
  let random = ref(0);

  const toastRef = ref();

  let params = reactive({
    pageSize: 10,
    currentPage: 1
  });

  let props = defineProps({
    current: {
      type: Number,
      default: 1
    },
    isOper: {
      type: Boolean,
      default: true
    },
    teacherId: {
      type: Number,
      default: 0
    }
  });
  // 监听父元素传参
  watch(
    () => props.current,
    val => {
      if (val !== 1) return;
      nextTick(() => {
        httpData();
      });
    },
    { immediate: true }
  );
  let httpList = ref([]);

  const httpData = async (reset = true) => {
    random.value = await suiji(0, defaultImagesList.length - 1);
    let options = JSON.parse(JSON.stringify(params));
    options.id = props.teacherId || state.vuex_user.teacher.id;
    options.approved = !props.isOper ? 'access' : 'all';
    let { videos } = await uni.$uv.http.post('/app/teacher/self_videos', options);
    let list = videos.map(r => {
      return {
        ...r,
        approvedStauts: checkStatus[r.approved],
        oper: false
      };
    });
    if (reset) {
      httpList.value.splice(0, httpList.value.length, ...list);
    } else {
      httpList.value.push(...list);
    }
  };

  // 触发子组件更新事件
  const sonChange = () => {
    params.currentPage++;
    httpData(false);
  };
  defineExpose({ sonChange });
  // 长按
  const onLongPress = item => {
    item.oper = true;
  };
  let itemVal = ref(0),
    modalRef = ref();
  // 删除
  const onDelte = item => {
    itemVal.value = item;
    modalRef.value.open();
  };
  // 删除接口
  const onConfirm = async () => {
    await uni.$uv.http.post('/app/video/delete', { id: itemVal.value.id });
    let index = httpList.value.findIndex(r => r.id === itemVal.value.id);
    httpList.value.splice(index, 1);
    toastFn(toastRef.value, '删除成功', 'success');
  };
  const onEdit = item => {
    item.oper = false;
    uni.$uv.route({
      url: '/pages/me/pushVideo',
      params: {
        id: item.id
      }
    });
  };
</script>

<style lang="scss" scoped>
  .video {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 26rpx;
    box-sizing: border-box;
    &-empty {
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .card {
      font-size: 24rpx;
      position: relative;
      height: 485rpx;
      width: 49%;
      border-radius: 21rpx;
      margin-bottom: 14rpx;
      overflow: hidden;
      &-name {
        position: absolute;
        left: 13rpx;
        bottom: 17rpx;
        padding: 9rpx 24rpx;
        border-radius: 24rpx;
        font-size: 24.419rpx;
        font-weight: 900;
        color: #fff;
        z-index: 1;
      }
      &-image {
        height: 100%;
      }
      &:nth-of-type(even) {
        margin-left: 2%;
      }
      &-status {
        position: absolute;
        top: 174rpx;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        width: 249rpx;
        height: 68rpx;
        line-height: 68rpx;
        border-radius: 34rpx;
        text-align: center;
      }
      &-oper {
        height: 263rpx;
        width: 230rpx;
        padding: 21rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
        background-color: #1d1f24;
        border-radius: 40rpx;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 24rpx;
        &-box {
          display: flex;
          justify-content: space-around;
          align-items: center;
          flex: 1;
          color: #dcdcdc;
        }
      }
    }
  }
</style>
